<template>
  <!--新增角色-->
  <div class="addRoleContainer">
      <el-form
        ref="newRoleForm"
        :model="newRoleForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-row>
          <el-col :lg="9" :md="12"  :sm="9" :xs="12" >
            <el-form-item label="角色名" prop="name">
              <el-input v-model="newRoleForm.name" size="medium" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item label="头像路径" prop="imageUrl">
              <el-input
                v-model="newRoleForm.imageUrl"
                size="medium"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item label="地区" prop="region">
              <el-select v-model="newRoleForm.region" placeholder="请选择所属地区" size="medium">
                <el-option label="须弥" value="须弥"></el-option>
                <el-option label="稻妻" value="稻妻"></el-option>
                <el-option label="璃月" value="璃月"></el-option>
                <el-option label="蒙德" value="蒙德"></el-option>
                <el-option label="至冬" value="至冬"></el-option>
                <el-option label="未知" value="未知"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item label="星级" prop="starLevel">
              <el-select v-model="newRoleForm.starLevel" placeholder="请选择所属星级" size="medium">
                <el-option label="五星" value="五星"></el-option>
                <el-option label="四星" value="四星"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item label="元素" prop="element">
              <el-select v-model="newRoleForm.element" placeholder="请选择所属元素" size="medium">
                <el-option label="火" value="火"></el-option>
                <el-option label="水" value="水"></el-option>
                <el-option label="风" value="风"></el-option>
                <el-option label="雷" value="雷"></el-option>
                <el-option label="草" value="草"></el-option>
                <el-option label="冰" value="冰"></el-option>
                <el-option label="岩" value="岩"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row >
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item label="武器" prop="weapon">
              <el-select v-model="newRoleForm.weapon" placeholder="请选择武器" size="medium">
                <el-option label="单手剑" value="单手剑"></el-option>
                <el-option label="双手剑" value="双手剑"></el-option>
                <el-option label="弓" value="弓"></el-option>
                <el-option label="长柄武器" value="长柄武器"></el-option>
                <el-option label="法器" value="法器"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :lg="9" :md="12" :sm="9" :xs="12" >
            <el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-button type="primary" @click="submitForm('newRoleForm')">保存</el-button>
                </el-col>
                <el-col :span="12" style="display:flex;justify-content:center;">
                  <el-button @click="resetForm('newRoleForm')">重置</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFunction:'',
      newRoleForm:{
        name: "",
        region: "",
        starLevel: "",
        element: "",
        weapon: "",
        imageUrl: "",
      },
      rules: {
        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
        region: [
          { required: true, message: "请选择角色所属地区", trigger: "change" },
        ],
        starLevel: [
          { required: true, message: "请选择角色所属星级", trigger: "change" },
        ],
        element: [
          { required: true, message: "请选择角色所属元素", trigger: "change" },
        ],
        weapon: [
          {
            required: true,
            message: "请选择角色所使用武器",
            trigger: "change",
          },
        ],
        imageUrl: [
          { required: true, message: "请输入角色头像路径", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //验证并提交新增角色信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.currentFunction == 'add'){
            this.$store.dispatch("createRole", this.newRoleForm).then(
              (value) => {
                // alert(value)
                this.resetForm("newRoleForm");
                this.$store.dispatch("getSelectedRoles")
                this.$store.dispatch("getAllRoles")
              },
              (reason) => {
                alert(reason);
              });
          }else if(this.currentFunction == 'update'){
            this.newRoleForm._id = this.$route.params.roleInfo._id
            this.$store.dispatch("updateRoleInfo",this.newRoleForm)
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //删除所有已选信息
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted(){
    if(this.$route.params.roleInfo == undefined){
      this.currentFunction = 'add'
    }else{
      this.currentFunction = 'update'
      this.newRoleForm = this.$route.params.roleInfo;
    }
  }
};
</script>

<style scoped lang="less">
@media only screen and (max-width: 600px){
  .addRoleContainer .el-col{
    width:70%
  }
}
@media only screen and (max-width: 420px){
  .addRoleContainer .el-col{
    width:90%;
  }
}
@media screen and (min-width: 420px){
  .addRoleContainer{
    padding:100px 0;
  }
}
@media screen and (max-width: 420px){
  .addRoleContainer{
    padding:45px 0;
  }
}
.addRoleContainer {
  height: auto;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 5px;
  .el-row{
    display: flex;
    justify-content: center;
  }
  .el-select{
    width:100%
  }
}
</style>